import React, { useState, useEffect, useRef } from 'react';
import { Carousel } from 'antd';

import './index.less';
import styles from './index.less';
import ChartLine from './components/line';
import Select from './select';

import {getDataList} from '@/api';
const isDev = process.env.NODE_ENV === 'development';


const IndexPage = () => {
  const carouselRef = useRef();

  const [time, setTime] = useState('');
  const [monitor, setMonitor] = useState(true);
  const [flag, setFlag] = useState(true);
  const [datalist1,setDatalist1] = useState([]);
  const [datalist3,setDatalist3] = useState([]);
  const [datalist4,setDatalist4] = useState([]);

  const [chartLine, setChartLine] = useState({
    data:[],
    dataX:[]
  });

  useEffect(() => {
    const fn = async()=>{
      const {data,isLogin,siteName,loginPath,data2} = await getDataList();
      if(!isLogin&&!isDev){
        window.location.href=loginPath;
      }
      setDatalist1(data);
      setDatalist3(data2?.baseInfo);
      setChartLine(data2?.chartLine12)
      document.title = siteName||'气象大屏';
    }
    fn();
    formatDateTime();
  }, []);

  // 左边数据

  // 右边数据

  function formatDateTime(date) {
    function addZero(num) {
      return num < 10 ? '0' + num : num;
    }
    setInterval(() => {
      var standardTime = new Date();
      var year = standardTime.getFullYear();
      var month = standardTime.getMonth() + 1;
      var date = standardTime.getDate();
      var hour = standardTime.getHours();
      var minute = standardTime.getMinutes();
      var second = standardTime.getSeconds();
      var formattedTime =
        year +
        '-' +
        addZero(month) +
        '-' +
        addZero(date) +
        ' ' +
        addZero(hour) +
        ':' +
        addZero(minute) +
        ':' +
        addZero(second);

      setTime(formattedTime);
    }, 1000);
  }
  function name(params) {
    var time;
    setInterval(() => {
      time = formatDateTime();
    }, 1000);
    return time;
  }


  function monitorFun() {
    if (monitor) {
      return (
        <Carousel
          ref={carouselRef}
          dotPosition="right"
          // dots={false}
          effect="scrollx"
          autoplaySpeed={7000}
          autoplay
          style={{ width: '100%', height: '100%' }}
        >

          <div>
            <div className="divBox2">
              <div className="cont-title">
                <span
                  style={{ cursor: 'pointer', color: flag ? '' : '#8CACD5' }}
                  onClick={() => {
                    setFlag(true);
                    setChartLine(datalist4);
                  }}
                >
                  &nbsp;设备输出电量
                </span>{' '}
                {/* <span
                  style={{ cursor: 'pointer', color: flag ? '#8CACD5' : '' }}
                  onClick={() => {
                    setFlag(false);
                    setChartLine(datalist5);
                  }}
                >
                  每日发电量
                </span> */}

              </div>
              <div className="contentbox">
                <ChartLine v={chartLine} />
              </div>
            </div>
          </div>
          <div>
            <div className="divBox">
              <div className="cont-body">
                {datalist3?.map((item, index) => (
                  <div
                    className={
                      item.list.length === 1
                        ? 'cont-item'
                        : 'cont-item cont-itemTwo'
                    }
                    key={index}
                  >
                    <div className="label">{item.label}</div>
                    <div className="value">
                      {item.value}
                      <span>{item.tag}</span>
                    </div>
                    {item.list &&
                      item.list.map((i, j, arr) => {
                        if (arr.length === 1) {
                          return (
                            <div className="oneBox" key={j}>
                              <div>
                                {i.titleNum}{' '}
                                <span className="sapnStyle"> 个</span>
                              </div>
                              <div className="titleName">{i.title}</div>
                            </div>
                          );
                        } else {
                          return (
                            <div className="marginTOp50">
                              <div className="twoBox" key={j}>
                                <div>{i.title}</div>
                                <div>
                                  {i.titleNum}
                                  <span className="sapnStyle"> 个</span>
                                </div>
                              </div>
                            </div>
                          );
                        }
                      })}
                    <div></div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {datalist1.map((v, k) => (
            <div key={k}>
              <div className="cont-flex">
                {v.map((item, index) => (
                  <div key={index} className="oneItemBox">
                    <div
                      className="img"
                      style={
                        item.url
                          ? {
                            background: `url(${item.url}) no-repeat center / contain`,
                          }
                          : null
                      }
                    ></div>
                    <div>
                      <div className="name">{item.meteorology}</div>
                      <div className="value">{item.value}<span className='valueUnit'>{item.unit}</span></div>
                      <div className="time">更新于 {item.time}</div>
                    </div>

                  </div>
                ))}
              </div>
            </div>
          ))}



        </Carousel>
      );
    }
  }
  return (
    <div className="allpageBg">
      <div className="allpage">
        <div className="main-wrap">
          <div className="cont-content">
            <div className="home-right">
              <div className="home-top">
                <div className="TimeDiv">{time}</div>
                <div className="cont-title">气象站</div>
                <div className="cont-body">{monitorFun()}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default IndexPage;
